<template>
	<view>
		<view class="send-expert-head-con">
			<view class="send-expert-head">
				<image class="send-expert-head-pic" :src="headPortrait" mode=""></image>
			</view>
			<view class="send-expert-name">
				{{name}}
			</view>
			<view class="send-expert-tip">
				感谢专家的辛苦付出
			</view>
		</view>
		<view class="send-detail-con">
			<view class="send-expert-tip">
				请选择答谢金额
			</view>
			<view class="send-detail-con-mon">
				<block v-for="(item,index) in account" :key="index">
					<view @click="chooseSend(index,item)" :class="currentIndex===index?'send-detail-con-mon-item-active':'send-detail-con-mon-item'">
						<view class="send-detail-con-mon-item-text">
							答谢
						</view>
						<view class="send-detail-con-mon-item-text">
							<text style="font-size: 20upx;">¥</text>
							<text>{{item}}</text>
						</view>
					</view>
				</block>
			</view>
			<view class="send-expert-tip">
				其他金额
			</view>
			<view class="send-other-contain">
				<view class="send-other-f">
					¥
				</view>
				<view class="send-other-r">
					元
				</view>
				<input class="send-other" @input="handleRepInput" type="number" v-model="reqPrice" />
			</view>
			<view class="send-textarea-contain">
				<textarea v-model="popupValue" class="send-textarea" placeholder-style="font-size:24upx;font-family:PingFangSC-Regular,PingFang SC;font-weight:400;color:rgba(168,168,168,1);" placeholder="给TA留言"/>
			</view>
			<view @click="confirm" class="tel-confirm">
				答谢
			</view>
		</view>
	</view>
</template>

<script>
	import { permissionJudge } from "@/utils/authority.js" //权限信息校验	
	export default {
		data() {
			return {
				account:[
					10,50,100,500
				],
				popupValue:'',
				headPortrait:'',
				id:'',
				name:'',
				currentIndex:0,
				reqPrice:10
			}
		},
		methods: {
			handleRepInput(){
				let account = this.account;
				if(this.reqPrice==account[0]){
					this.currentIndex=0
				}else if(this.reqPrice==account[1]){
					this.currentIndex=1
				}else if(this.reqPrice==account[2]){
					this.currentIndex=2
				}else if(this.reqPrice==account[3]){
					this.currentIndex=3
				}else {
					this.currentIndex=-1
				}
				console.log(this.reqPrice,this.currentIndex)
			},
			chooseSend(index,val){
				this.currentIndex = index;
				this.reqPrice = val;
			},
			confirm(){
				if(!permissionJudge('pay:order:regard')){
					uni.showToast({
						title:'暂无权限',
						icon:'none'
					})
					return false
				}
				const _self = this;
				const openId = uni.getStorageSync('openid');
				this.$request.post({
					url:'payOrder/toRegard',
					data:{
						   inUserInfoId: this.linkUserId,//必填，专家用户主键
						   payType: "21",//必填，支付渠道
						   totalPrice: this.reqPrice,//必填，订单价格
						   remarks:2,//必填，小程序支付时使用
						   regardRemarks:this.popupValue,//非必填，送心意留言
						   openId
					}
				}).then(res=>{
					console.log('支付',res)
					_self.pay(res);
				})
			},
			pay(orderInfo){
				const {payMap} = orderInfo;
				const {nonceStr,sign,signType,timeStamp} = payMap;
				let _self = this;
				uni.requestPayment({
				    provider: 'wxpay',
				    timeStamp: timeStamp,
				    nonceStr: nonceStr,
				    package: payMap.package,
				    signType:signType,
				    paySign: sign,
				    success: function (res) {
						uni.showToast({
							title:'赞助成功'
						})
						_self.closeRepopup();
				    },
				    fail: function (err) {
				        console.log('fail:' + JSON.stringify(err));
				    }
				});
			}
		},
		onLoad(option) {
			this.headPortrait = option.headPortrait;
			this.linkUserId = option.linkUserId;
			this.name = option.name;
		}
	}
</script>

<style scoped>
	.send-expert-head-con{
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		margin-top: 98upx;
		margin-left: 30upx;
		margin-right: 30upx;
		border-bottom: 1upx solid #EDEDED;
		padding-bottom: 28upx;
	}
	.send-expert-head{
		width: 135upx;
		height: 135upx;
		border-radius: 50%;
		border: 5upx solid rgba(255,255,255,1);
		box-shadow:0px 2px 14px 0px rgba(0,0,0,0.08);
	}
	.send-expert-head-pic{
		width: 135upx;
		height: 135upx;
		border-radius: 50%;
	}
	.send-expert-name{
		margin-top: 34upx;
	}
	.send-expert-tip{
		font-size:24upx;
		font-family:SourceHanSansCN-Normal,SourceHanSansCN;
		font-weight:400;
		color:rgba(153,153,153,1);
		line-height: 1;
		margin-top: 34upx;
	}
	.send-detail-con{
		margin: 0upx 30upx 27upx 30upx;
		padding: 35upx;
	}
	.send-detail-con-mon{
		display: flex;
		justify-content: space-between;
	}
	.send-detail-con-mon-item{
		width:135upx;
		height:139upx;
		background:linear-gradient(133deg,rgba(255,255,255,1) 0%,rgba(255,255,255,1) 59%,rgba(231,239,254,1) 100%);
		box-shadow:0px 0px 12upx 0px rgba(148,190,252,0.3);
		border-radius:10upx;
		opacity:0.5;
		font-size:22upx;
		font-family:PingFangSC-Regular,PingFang SC;
		font-weight:400;
		color:rgba(42,125,250,1);
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		margin-top: 20upx;
	}
	.send-detail-con-mon-item-active{
		width:135upx;
		height:139upx;
		background:linear-gradient(360deg,rgba(42,125,250,1) 0%,rgba(78,148,255,1) 100%);
		box-shadow:0px 0px 12upx 0px rgba(148,190,252,0.3);
		border-radius:10upx;
		font-size:22upx;
		font-family:PingFangSC-Regular,PingFang SC;
		font-weight:400;
		color:rgba(255,255,255,1);
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		margin-top: 20upx;
	}
	.send-other-contain{
		position: relative;
	}
	.send-other-r{
		position: absolute;
		right: 25upx;
		top: 20upx;
		font-size:24upx;
		font-family:PingFangSC-Medium,PingFang SC;
		font-weight:500;
		color:rgba(152,152,152,1);
	}
	.send-other-f{
		
		position: absolute;
		left: 25upx;
		top: 20upx;
		font-size:24upx;
		font-family:PingFangSC-Medium,PingFang SC;
		font-weight:500;
		color:rgba(51,51,51,1);
	}
	.send-other{
		background:rgba(252,252,252,1);
		border-radius:10upx;
		height:27upx;
		border:1upx solid rgba(230,230,230,1);
		padding: 20upx 51upx;
		margin-top: 20upx;
		/* font-size:24upx;
		font-family:PingFangSC-Medium,PingFang SC;
		font-weight:500;
		color:rgba(152,152,152,1); */
	}
	.send-textarea{
		background:rgba(255,255,255,1);
		border-radius:10upx;
		width: 100%;
		box-sizing: border-box;
		height: 248upx;
		padding: 18upx 20upx;
		border:1upx solid rgba(230,230,230,1);
		margin-top: 40upx;
	}
	.tel-confirm {
		/* margin: 77upx 30upx 40upx 30upx; */
		margin-top: 40upx;
		border-radius: 44upx;
		height: 88upx;
		display: flex;
		justify-content: center;
		align-items: center;
		background: linear-gradient(90deg, rgba(70, 144, 255, 1) 0%, rgba(42, 125, 250, 1) 100%);
		box-shadow: 0px 4upx 18upx 0px rgba(126, 178, 255, 0.7);
		font-size: 32upx;
		font-family: PingFangSC-Medium, PingFang SC;
		font-weight: 500;
		color: rgba(255, 255, 255, 1);
	}
</style>
